<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>smartcrop.js testbed</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>smartcrop.js testbed</h1>
  <p>
    smartcrop.js is a content aware image cropping library. On this page you
    can test it with your own images. You can learn more about the library on
    it's <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
  </p>
  <div>
    <form>
      <div class="drop">
        <h2>Drop images on this page to analyze them.</h2>
        <input type="file" name="file" accept="image/*" />
      </div>
      <label>Width
        <div>
          <input name="width" type="range" min="50" max="500" step="1" value="250" /><span class="value">250</span>px
        </div>
      </label>
      <label>Height
        <div>
          <input name="height" type="range" min="50" max="500" step="1" value="250" /><span class="value">250</span>px
        </div>
      </label>
      <label>minScale
        <div>
          <input name="minScale" type="range" min="0.5" max="1.0" step="0.1" value="1" /><span class="value">1.0</span>
        </div>
      </label>
      <p>
        <label>Rule of thirds<input name="ruleOfThirds" type="checkbox" value="1" checked /></label>
      </p>
      <p><strong>Face Detection</strong></p>
      <div>
        <label><input name="faceDetection" type="radio" value="off" checked />Off</label>
      </div>
      <div>
        <label><input name="faceDetection" type="radio" value="face-api" />Use
          <a href="https://github.com/justadudewhohacks/face-api.js">face-api.js</a>
          (tiny_face_detector model)
        </label>
      </div>
      <div>
        <label><input name="faceDetection" type="radio" value="jquery" />Use
          <a href="http://facedetection.jaysalvat.com/">jquery.facedetection</a></label>
      </div>
      <div>
        <label><input name="faceDetection" type="radio" value="tracking" />Use
          <a href="https://trackingjs.com/">tracking.js</a></label>
      </div>
      <div>
        <label class="opencv-loading"><input name="faceDetection" type="radio" value="opencv" disabled />Use <a
            href="https://opencv.org/">opencv.js</a></label>
      </div>
    </form>
  </div>
  <div class="output">
    <canvas id="c"></canvas>
  </div>
  <div class="sidebar">
    <div id="debug"></div>
    <h4>All Crops</h4>
    <div class="crops"></div>
  </div>
  <script src="jquery.js"></script>
  <script src="underscore.js"></script>
  <script src="../smartcrop.js"></script>
  <script src="smartcrop-debug.js"></script>
  <script src="tracking-min.js"></script>
  <script src="tracking-face-min.js"></script>
  <script src="jquery.facedetection.min.js"></script>
  <script src="face-api.min.js"></script>
  <script src="testbed.js"></script>
  <script async src="https://unpkg.com/opencv.js@1.2.1/opencv.js"
    integrity="sha384-ucXOxPgA5tSKdaZgFD+5C0lAJeavjW31veENhNvOwsTjgx8waDD0s1QcMdUxhlxk" crossorigin="anonymous"
    onload="openCvReady()"></script>
  <p style="clear:both">Example Photo by Makhmutova Dina on Unsplash</p>
  <script src="/a.js" async></script>
</body>

</html>